<template>
  <div class="app-center">
    <!-- 左侧导航菜单 -->
    <div class="side-menu">
      <div class="menu-header">
        <h2>应用中心</h2>
      </div>
      <el-menu :default-active="activeMenu" class="menu-list" @select="handleMenuSelect">
        <el-menu-item v-for="item in menuItems" :key="item.value" :index="item.value">
          <el-icon><component :is="item.icon" /></el-icon>
          <span>{{ item.label }}</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 右侧内容区域 -->
    <div class="main-content">
      <!-- 搜索和筛选区域 -->
      <div class="search-area">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索应用..."
          class="search-input"
          :prefix-icon="Search"
        />
        <el-select v-model="categoryValue" placeholder="应用分类" class="category-select">
          <el-option
            v-for="item in categories"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <!-- 应用列表区域 -->
      <div class="app-list">
        <el-row :gutter="24">
          <draggable
            v-model="displayApps"
            class="drag-container"
            :animation="300"
            item-key="id"
            handle=".drag-handle"
            @start="onDragStart"
            @end="onDragEnd"
          >
            <template #item="{ element: app }">
              <el-col :span="6">
                <div class="app-card">
                  <div class="app-icon-wrapper">
                    <el-icon class="drag-handle"><Rank /></el-icon>
                    <img :src="app.icon" class="app-icon" />
                  </div>
                  <div class="app-info">
                    <h3>{{ app.name }}</h3>
                    <p>{{ app.description }}</p>
                    <div class="app-actions">
                      <el-button type="primary" class="launch-btn" @click="launchApp(app)">
                        启动
                      </el-button>
                      <el-button class="detail-btn" @click="showAppDetail(app)"> 详情 </el-button>
                    </div>
                  </div>
                </div>
              </el-col>
            </template>
          </draggable>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { Search, Grid, Document, Tools, Monitor, Rank } from '@element-plus/icons-vue'
import draggable from 'vuedraggable'

interface AppItem {
  id: number
  name: string
  description: string
  icon: string
  category: string
}

// 应用分类
const categories = [
  { label: '全部', value: 'all' },
  { label: '办公应用', value: 'office' },
  { label: '开发工具', value: 'development' },
  { label: '系统工具', value: 'system' }
]

// 示例应用数据
const apps = ref<AppItem[]>([
  {
    id: 1,
    name: '文档编辑器',
    description: '专业的在线文档编辑工具，支持多人协作',
    icon: 'https://picsum.photos/200?random=1',
    category: 'office'
  },
  {
    id: 2,
    name: 'VS Code',
    description: '强大的代码编辑器，支持多种编程语言',
    icon: 'https://picsum.photos/200?random=2',
    category: 'development'
  },
  {
    id: 3,
    name: '系统监控',
    description: '实时监控系统性能和资源使用情况',
    icon: 'https://picsum.photos/200?random=3',
    category: 'system'
  },
  {
    id: 4,
    name: 'Excel 在线版',
    description: '功能完善的在线电子表格工具',
    icon: 'https://picsum.photos/200?random=4',
    category: 'office'
  },
  {
    id: 5,
    name: 'Terminal',
    description: '现代化的命令行终端工具',
    icon: 'https://picsum.photos/200?random=5',
    category: 'development'
  },
  {
    id: 6,
    name: '磁盘清理',
    description: '智能清理系统垃圾，优化存储空间',
    icon: 'https://picsum.photos/200?random=6',
    category: 'system'
  },
  {
    id: 7,
    name: 'PPT 制作',
    description: '专业的演示文稿制作工具',
    icon: 'https://picsum.photos/200?random=7',
    category: 'office'
  },
  {
    id: 8,
    name: 'Git 客户端',
    description: '可视化的 Git 版本控制工具',
    icon: 'https://picsum.photos/200?random=8',
    category: 'development'
  },
  {
    id: 9,
    name: '备份工具',
    description: '自动备份重要文件和系统设置',
    icon: 'https://picsum.photos/200?random=9',
    category: 'system'
  },
  {
    id: 10,
    name: '思维导图',
    description: '直观的思维导图绘制工具',
    icon: 'https://picsum.photos/200?random=10',
    category: 'office'
  },
  {
    id: 11,
    name: 'Docker Desktop',
    description: '容器化应用管理工具',
    icon: 'https://picsum.photos/200?random=11',
    category: 'development'
  },
  {
    id: 12,
    name: '防火墙',
    description: '保护系统安全的防火墙工具',
    icon: 'https://picsum.photos/200?random=12',
    category: 'system'
  },
  {
    id: 13,
    name: 'PDF 阅读器',
    description: '支持批注和编辑的 PDF 工具',
    icon: 'https://picsum.photos/200?random=13',
    category: 'office'
  },
  {
    id: 14,
    name: 'Postman',
    description: 'API 开发和测试工具',
    icon: 'https://picsum.photos/200?random=14',
    category: 'development'
  },
  {
    id: 15,
    name: '任务管理器',
    description: '系统进程和性能监控工具',
    icon: 'https://picsum.photos/200?random=15',
    category: 'system'
  },
  {
    id: 16,
    name: '邮件客户端',
    description: '专业的邮件收发管理工具',
    icon: 'https://picsum.photos/200?random=16',
    category: 'office'
  }
])

const searchKeyword = ref('')
const categoryValue = ref('all')

// 过滤后的应用列表
const filteredApps = computed(() => {
  return apps.value.filter((app) => {
    const matchKeyword = app.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
    const matchCategory = categoryValue.value === 'all' || app.category === categoryValue.value
    return matchKeyword && matchCategory
  })
})

// 用于显示的应用列表
const displayApps = computed({
  get: () => filteredApps.value,
  set: (value) => {
    // 更新应用顺序
    const newOrder = value.map((app, index) => ({
      ...app,
      order: index
    }))
    apps.value = apps.value.map((app) => {
      const newApp = newOrder.find((a) => a.id === app.id)
      return newApp || app
    })
  }
})

// 拖拽状态
const isDragging = ref(false)

// 拖拽开始
const onDragStart = () => {
  isDragging.value = true
}

// 拖拽结束
const onDragEnd = () => {
  isDragging.value = false
}

// 启动应用
const launchApp = (app: AppItem) => {
  console.log('启动应用:', app.name)
  // 这里添加启动应用的逻辑
}

// 显示应用详情
const showAppDetail = (app: AppItem) => {
  console.log('显示应用详情:', app.name)
  // 这里添加显示应用详情的逻辑
}

// 菜单项配置
const menuItems = [
  { label: '全部应用', value: 'all', icon: 'Grid' },
  { label: '办公应用', value: 'office', icon: 'Document' },
  { label: '开发工具', value: 'development', icon: 'Tools' },
  { label: '系统工具', value: 'system', icon: 'Monitor' }
]

const activeMenu = ref('all')

// 处理菜单选择
const handleMenuSelect = (index: string) => {
  categoryValue.value = index
}
</script>

<style scoped lang="scss">
.app-center {
  display: flex;
  height: 100%;
  background-color: #f5f5f7;

  .side-menu {
    width: 220px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(0, 0, 0, 0.1);

    .menu-header {
      padding: 24px 20px;
      h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 500;
        color: #1d1d1f;
      }
    }

    .menu-list {
      border-right: none;
      background: transparent;

      :deep(.el-menu-item) {
        height: 40px;
        line-height: 40px;
        margin: 4px 8px;
        border-radius: 6px;
        color: #1d1d1f;

        &:hover {
          background-color: rgba(0, 0, 0, 0.06);
        }

        &.is-active {
          background-color: rgba(0, 0, 0, 0.08);
          color: #0066cc;
        }

        .el-icon {
          margin-right: 8px;
        }
      }
    }
  }

  .main-content {
    flex: 1;
    padding: 24px 32px;
    overflow-y: auto;
  }

  .search-area {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;

    .search-input {
      width: 320px;
      :deep(.el-input__wrapper) {
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }
    }

    .category-select {
      width: 180px;
      :deep(.el-input__wrapper) {
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.8);
      }
    }
  }

  .app-list {
    .drag-container {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
    }

    .app-card {
      background: rgba(255, 255, 255, 0.8);
      border-radius: 12px;
      margin-bottom: 24px;
      transition: all 0.3s ease;
      border: 1px solid rgba(0, 0, 0, 0.1);
      overflow: hidden;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
      }

      .app-icon-wrapper {
        position: relative;

        .drag-handle {
          position: absolute;
          top: 12px;
          right: 12px;
          cursor: move;
          padding: 4px;
          border-radius: 4px;
          color: #86868b;
          transition: all 0.2s ease;

          &:hover {
            background: rgba(0, 0, 0, 0.06);
            color: #1d1d1f;
          }
        }
      }

      .app-icon {
        width: 80px;
        height: 80px;
        object-fit: contain;
        border-radius: 16px;
      }

      .app-info {
        padding: 16px 20px;

        h3 {
          margin: 0;
          font-size: 16px;
          font-weight: 500;
          color: #1d1d1f;
        }

        p {
          font-size: 14px;
          color: #86868b;
          margin: 8px 0 16px;
          line-height: 1.4;
        }

        .app-actions {
          display: flex;
          gap: 12px;

          .launch-btn {
            flex: 2;
            border-radius: 8px;
            background: #0066cc;
            border: none;

            &:hover {
              background: #0077ed;
            }
          }

          .detail-btn {
            flex: 1;
            border-radius: 8px;
            border: 1px solid #d2d2d7;
            color: #1d1d1f;

            &:hover {
              background: rgba(0, 0, 0, 0.04);
            }
          }
        }
      }
    }
  }

  // 拖拽时的样式
  :deep(.sortable-drag) {
    opacity: 0.8;
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.9);
  }

  :deep(.sortable-ghost) {
    opacity: 0.3;
  }
}
</style>
